<template>
  <div>
    <el-table :data="tableData" border stripe header-cell-class-name="table-header">
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="deleteById(scope.row.id)">
            <el-icon class="el-icon--left">
              <Delete/>
            </el-icon>
            删除角色
          </el-button>
          <el-button type="primary" @click="selectById(scope.row.id)">
            <el-icon class="el-icon--left">
              <Search/>
            </el-icon>
            查看角色权限
          </el-button>
          <el-button type="primary" @click="goUpdate(scope.row.id)">
            <el-icon class="el-icon--left">
              <Edit/>
            </el-icon>
            修改角色权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--查看角色权限-->
    <el-dialog v-model="dialogVisibleSelect" title="查看角色名称" width="50%">
      <div>
        <span style="margin-right: 20px;margin-left: 100px">角色名称</span>
        {{ roleName }}
      </div>
      <div style="margin-left: 100px;margin-top: 100px">
        拥有权限:
        <span v-for="p in permissionsArray">{{ p }},</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleSelect=false">返回</el-button>
        </span>
      </template>
    </el-dialog>

    <!--修改权限-->
    <el-dialog v-model="dialogVisibleUpdate" title="修改角色权限" width="50%">
      <div>
        <span style="margin-right: 20px;margin-left: 100px">角色名称</span>
        {{ roleNameUpdate }}
      </div>

      <div style="margin-left: 100px;margin-top: 100px">
        <p style="margin-left: 100px"></p><span>拥有权限:</span>
        <el-checkbox-group v-model="permissionsListUpdate" style="margin-top: 20px">
          <el-checkbox v-for="permissions in permissionsArrayUpdate" :key="permissions.id" :label="permissions.id">
            {{ permissions.permissionsName }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="update()">修改</el-button>
        </span>
      </template>
    </el-dialog>

    <div style="margin-top: 50px;margin-left: 500px">
      <el-button type="primary" @click="goAdd()">
        <el-icon class="el-icon--left">
          <CirclePlusFilled/>
        </el-icon>
        添加新角色
      </el-button>
    </div>

    <!--添加-->
    <el-dialog v-model="dialogVisibleAdd" title="添加角色" width="50%">
      <div>
        <span style="margin-right: 20px;margin-left: 100px">角色名称</span>
        <el-input v-model="roleNameAdd" style="width: 150px"></el-input>
      </div>
      <div style="margin-left: 100px;margin-top: 100px">
        <p style="margin-left: 100px"></p><span>拥有权限:</span>
        <el-checkbox-group v-model="permissionsListAdd" style="margin-top: 20px">
          <el-checkbox v-for="permissions in permissionsArrayAdd" :key="permissions.id" :label="permissions.id">
            {{ permissions.permissionsName }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="cancel()">取消</el-button>
          <el-button type="primary" @click="add()">添加</el-button>
        </span>
      </template>
    </el-dialog>

    <!--分页-->
    <el-pagination style="width:400px;margin: 40px auto" v-model:page-size="pageSize" v-model:current-page="curPage"
                   :total="total" background @current-change="info"></el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "role",
  created() {
    this.info()
  },
  data() {
    return {
      tableData: [],
      pageSize: 5,
      curPage: 1,
      total: 0,

      dialogVisibleSelect: false,
      roleName: '',
      permissionsArray: [],

      dialogVisibleUpdate: false,
      roleNameUpdate: '',
      permissionsListUpdate: [],
      permissionsArrayUpdate: [],
      updateId: 0,

      dialogVisibleAdd: false,
      roleNameAdd: '',
      permissionsListAdd: [],
      permissionsArrayAdd: [],
    }
  },
  methods: {
    info() {
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize,
      }
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/api/role/info', param, config).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    selectById(id) {
      this.dialogVisibleSelect = true
      axios.get('/api/role/selectOne?id=' + id, null).then(response => {
        this.roleName = response.data.roleName
      })
      let param = []
      param.push(id)
      axios.post('/api/role/selectRolePer', param).then(response => {
        this.permissionsArray = response.data
      })
    },
    goUpdate(id) {
      this.dialogVisibleUpdate = true
      this.updateId = id
      axios.get('/api/role/selectOne?id=' + id, null).then(response => {
        this.roleNameUpdate = response.data.roleName
      })
      axios.post('/api/permissions/info', null).then(response => {
        this.permissionsArrayUpdate = response.data
      })
      axios.get('/api/role/selectRolePerNow?id=' + id, null).then(response => {
        this.permissionsListUpdate = response.data
      })
    },
    update() {
      let param = new URLSearchParams();
      param.append("permissionsIds", this.permissionsListUpdate)
      param.append("roleId", this.updateId)
      axios.post('/api/role/update', param).then(response => {
        if (response.data.code == "000000") {
          this.dialogVisibleUpdate = false
          ElMessage.success('修改成功');
        }else {
          ElMessage.error('修改失败');
        }

      })
    },
    goAdd() {
      this.dialogVisibleAdd = true
      axios.post('/api/permissions/info', null).then(response => {
        this.permissionsArrayAdd = response.data
      })
    },
    add() {
      let param = new URLSearchParams();
      param.append("roleName", this.roleNameAdd)
      param.append("permissionsIds", this.permissionsListAdd)
      axios.post('/api/role/add', param).then(response => {
        if (response.data.code == "000000"){
          ElMessage.success('添加成功');
          this.dialogVisibleAdd = false
          this.roleNameAdd = ''
          this.permissionsListAdd = []
          this.permissionsArrayAdd = []
          this.info()
        }else {
          ElMessage.error('添加失败');
        }

      })
    },
    cancel() {
      this.dialogVisibleAdd = false
      this.roleNameAdd = ''
      this.permissionsListAdd = []
      this.permissionsArrayAdd = []
    },
    deleteById(id) {
      let param = new URLSearchParams();
      param.append("roleId", id)
      axios.post('/api/role/delete', param).then(response => {
        if (response.data.code == "000000"){
          ElMessage.success('删除成功');
          this.info()
        }else {
          ElMessage.error('删除失败');
        }
      })
    },
  }
}
</script>

<style scoped>

</style>